<?php include('scripts.php'); ?>
<script type="text/javascript">
var packageStrings = "<option value=''></option>";
var datagrid = null;
var datagridDetail = null;
$(function() {
    datagridDetail = $("#datagridDetail").r9jasonDataTable({
        // online1DataTable extra params
        "idTr" : true, // assign <tr id='xxx'> from 1st columns array(aoColumns);
        "extraParam" : function(aoData){ // pass extra params to server
            aoData.push( { "name": "filterAction", "value": $("#filterAction").val() } );
        },
        "reassignEvent" : function(){ // extra function for reassignEvent when JSON is back from server
            reassigndatagridDetailEventAttr();
        },
        // datatables params
        "bLengthChange": true,
        "bFilter": false,
        "bProcessing": true,
        "bServerSide": true,
        "bAutoWidth": false,
        "sAjaxSource": "/member/bonusDetailList",
        "sPaginationType": "full_numbers",
        "aaSorting": [[1,'desc']],
        "aoColumns": [
                      { "sName" : "commission_id",  "bVisible": false},
                      { "sName" : "created_on",  "bSortable": true},
                      { "sName" : "commission_type",  "bSortable": false},
                      { "sName" : "credit",  "bSortable": false},
                      { "sName" : "debit",  "bSortable": false},
                      { "sName" : "remark",  "bSortable": false}
        ]
    });

    $(".activeLink").click(function(event){
        event.preventDefault();
        $("#filterAction").val($(this).attr("ref"));
        datagridDetail.fnDraw();
    });

});
function reassigndatagridDetailEventAttr(){

}
</script>

<form action="/member/bonusDetails" id="bonusForm" method="post">
<input type="hidden" id="filterAction" value="DSB">
<div style="padding: 10px; top: 30px; width: 98%">

<div class="portlet">
    <div class="portlet-header"><?php echo __('Bonus Details') ?></div>
    <div class="portlet-content">

        <table class="display" id="datagrid" border="0" width="100%">
            <thead>
            <tr>
				<th><?php echo __('Bonus') ?></th>
                <th><?php echo __('Amount') ?></th>
                <th><?php echo __('View Details') ?></th>
			</tr>
            </thead>
            <tbody>
			<?php

                    echo "<tr class='odd'>
				        <td align='center'>".__('DSB')."</td>
				        <td align='center'>".$dsb."</td>
				        <td align='center'>".link_to(__('Details'), '#', array (
                                                                              'class' => 'activeLink',
                                                                              'ref' => 'DSB'
                                                                        ))."</td></tr>";
                    echo "<tr class='even'>
				        <td align='center'>".__('GDB')."</td>
				        <td align='center'>".$gdb."</td>
				        <td align='center'>".link_to(__('Details'), '#', array (
                                                                              'class' => 'activeLink',
                                                                              'ref' => 'GDB'
                                                                        ))."</td></tr>";
                    echo "<tr class='odd'>
				        <td align='center'>".__('Total')."</td>
				        <td align='center'>".$total."</td><td></td></tr>";
			?>
            </tbody>
        </table>
    </div>
</div>

<div class="portlet">
    <div class="portlet-header"><?php echo __('Details') ?></div>
    <div class="portlet-content">
        <table class="display" id="datagridDetail" border="0" width="100%">
            <thead>
            <tr>
                <th>Detail Id[hidden]</th>
                <th><?php echo __('Date') ?></th>
                <th><?php echo __('Commission Type') ?></th>
                <th><?php echo __('Credit') ?></th>
                <th><?php echo __('Debit') ?></th>
                <th><?php echo __('Remarks') ?></th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</div>
</form>